$(function(){
	listSaleOrder();
//	drawCharts();
})

// datatable初始化在这个函数里
function listSaleOrder(){
	$.ajax({
		type : "post",
		url : "listSaleOrder.action",
		dataType : "json",
		data : {},
		success : function(result) {
			//drawCharts(); // 绘制完表格后再绘制图表，不能同时进行，否则会报错
			
			//console.log(result);
			var data = eval("(" + result + ")");
			
			$("#saleOrderTable tbody").html('');
			
			for (var i = 0; i < data.length; i++) {
				var d = data[i];
				$("#saleOrderTable tbody").append(
						'<tr>' + 
							'<td>' + d.id + '</td>' + 
							'<td>' + d.saleOrderNo + '</td>' + 
							'<td>' + d.vipName + '</td>' +
							'<td>' + d.employeeName + '</td>' +
							'<td>' + d.adminName + '</td>' + 
							'<td>' + d.total + '</td>' +
							'<td>' + d.status + '</td>' +
							'<td>' + d.saleDateTime + '</td>' +
						'</tr>');
			};	
			// datatables 初始化
			var table = $("#saleOrderTable").dataTable({				
			//"stateSave" : true, // 保持状态
			"oLanguage" : { // 设置语言
				"sProcessing" : "正在加载中......",
				"sLengthMenu" : "每页显示 _MENU_ 条记录",
				"sZeroRecords" : "对不起，查询不到相关数据！",
				'sSearch' : '检索:',
				"sEmptyTable" : "表中无数据存在！",
				"sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
				"sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
				"oPaginate" : {
					"sFirst" : "首页",
					"sPrevious" : "上一页",
					"sNext" : "下一页",
					"sLast" : "末页"
					}
				}
			});	
		},
		error : function() {
			console.log("出现错误，请稍后重试！")
		}
	});

}

// 绘制图表
function drawCharts(){
	var year = $(".theYear").val();
	console.log(year);
	
	$.ajax({
		type : "post",
		url : "eachMonthSales.action",
		dataType : "json",
		data : {
			"year" : year
		},
		success : function(result) {
			//console.log(result);
			var data = eval("(" + result + ")");
			console.log("获取的数据："+data);
			
			// echarts的相关代码
			//基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('echartsTable'));

			// 指定图表的配置项和数据
			var option = {
			    title: {
			        text: year+'年各月份销售额'
			    },
			    color: ['#3398DB'],
			    tooltip: {
			    	trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    legend: { 
			        data:['销售额'] //图例
			    },
			    toolbox: { // 右侧工具栏
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false}, // 数据页面
			            magicType: {type: ['line', 'bar']}, // 折线，柱状图切换
			            restore: {}, // 刷新
			            saveAsImage: {} // 默认保存为png格式的图片
			        }
			    },
			    xAxis: { // x轴
			        data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
			    },
			    yAxis: {},
			    series: [{ //每一个数据
			        name: '销售额',
			        type: 'bar',
			        data: data
			    }]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		},
		error : function() {
			console.log("出现错误，请稍后重试！")
		}
	});
}

// 根据起始时间与结束时间查看类别销售额
function checkSales(){
	var start = $("#startDatepicker").val();
	var end = $("#endDatepicker").val();
	console.log(start+" TO "+end);
	
	$.ajax({
		type : "post",
		url : "periodSales.action",
		dataType : "json",
		data : {
			"start" : start,
			"end" : end
		},
		success : function(result) {
			var data = eval("(" + result + ")");
			//console.log("获取的数据："+ data);
			var serCateName = [];
			var total = [];
			for (var i = 0; i < data.length; i++) {
				serCateName.push(data[i].name);
				total.push(data[i].value);
			}
			//console.log(serCateName);
			//console.log(total);
			
			// echarts的相关代码
			//基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('echartsBin'));
			
			var option = {
				title: {
				    text: start + ' 至 ' + end + ' 各服务类型销售额环形图'
				},
				tooltip : {
					trigger : 'item',
					formatter : "{a} <br/>{b}: {c} ({d}%)"
				},
				legend : {
					orient : 'vertical',
					x : 'left',
					top : 30, // 离顶部的距离
					data : serCateName
				},
				toolbox: { // 右侧工具栏
			        show: true,
			        feature: {			            
			            dataView: {readOnly: false}, // 数据页面			        
			            restore: {}, // 刷新
			            saveAsImage: {} // 默认保存为png格式的图片
			        }
			    },
				series : [ {
					name : '销售额',
					type : 'pie',
					radius : [ '50%', '70%' ],
					avoidLabelOverlap : false,
					label : {
						normal : {
							show : false,
							position : 'center'
						},
						emphasis : {
							show : true,
							textStyle : {
								fontSize : '30',
								fontWeight : 'bold'
							}
						}
					},
					labelLine : {
						normal : {
							show : false
						}
					},
					data : data
				} ]
			};
			
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);

			//基于准备好的dom，初始化echarts实例
			var myChartLine = echarts.init(document.getElementById('echartsLine'));

			// 指定图表的配置项和数据
			var option2 = {
			    title: {
			        text: start + ' 至 ' + end + ' 各服务类型销售额'
			    },
			    color: ['#3398DB'],
			    tooltip: {
			    	trigger: 'axis',
			        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
			            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    legend: { 
			        data:['销售额'], //图例
			    	top : 30
			    },
			    toolbox: { // 右侧工具栏
			        show: true,
			        feature: {
			            dataZoom: {
			                yAxisIndex: 'none'
			            },
			            dataView: {readOnly: false}, // 数据页面
			            magicType: {type: ['line', 'bar']}, // 折线，柱状图切换
			            restore: {}, // 刷新
			            saveAsImage: {} // 默认保存为png格式的图片
			        }
			    },
			    xAxis: { // x轴
			        data: serCateName
			    },
			    yAxis: {},
			    series: [{ //每一个数据
			        name: '销售额',
			        type: 'bar',
			        data: total
			    }]
			};

			// 使用刚指定的配置项和数据显示图表。
			myChartLine.setOption(option2);
			
		},
		error : function() {
			console.log("出现错误，请稍后重试！")
		}
	});
	
}



// jquery-ui的js代码
// inline scripts related to this page
jQuery(function($) {

	$("#startDatepicker").datepicker({
		showOtherMonths : true,
		selectOtherMonths : false,
		// isRTL:true,
		changeMonth : true,
		changeYear : true,
		dateFormat: 'yy-mm-dd',

	/*
	 * changeMonth: true, changeYear: true,
	 * 
	 * showButtonPanel: true, beforeShow: function() { //change button
	 * colors var datepicker = $(this).datepicker( "widget" );
	 * setTimeout(function(){ var buttons =
	 * datepicker.find('.ui-datepicker-buttonpane') .find('button');
	 * buttons.eq(0).addClass('btn btn-xs'); buttons.eq(1).addClass('btn
	 * btn-xs btn-success'); buttons.wrapInner('<span
	 * class="bigger-110" />'); }, 0); }
	 */
	});

	$("#endDatepicker").datepicker({
		showOtherMonths : true,
		selectOtherMonths : false,
		// isRTL:true,
		changeMonth : true,
		changeYear : true,
		dateFormat: 'yy-mm-dd',

	/*
	 * changeMonth: true, changeYear: true,
	 * 
	 * showButtonPanel: true, beforeShow: function() { //change button
	 * colors var datepicker = $(this).datepicker( "widget" );
	 * setTimeout(function(){ var buttons =
	 * datepicker.find('.ui-datepicker-buttonpane') .find('button');
	 * buttons.eq(0).addClass('btn btn-xs'); buttons.eq(1).addClass('btn
	 * btn-xs btn-success'); buttons.wrapInner('<span
	 * class="bigger-110" />'); }, 0); }
	 */
	});
	
});
